<!--
 * @Description: 管理员账号管理
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-09-09 15:14:07
 * @LastEditTime: 2025-09-28 10:47:53
-->
<template>
  <TablePage
    v-model:cols="tableCols"
    v-model:toolsOptions="toolsOptions"
    v-model:rowBtnsOptions="rowBtnsOptions"
    :listRequest="getAdminList"
  >
    <!-- 搜索表单选择部门 -->
    <template #searchDeptId="scope">
      <el-select v-model="scope.val.deptId" placeholder="选择所属部门">
        <el-option
          v-for="dept in deptRawData"
          :key="dept.id"
          :label="dept.name"
          :value="dept.id"
        />
      </el-select>
    </template>
    <!-- 新增、编辑弹窗选择角色 -->
    <template #editRole="editParams">
      <el-select
        v-model="editParams.val.roleIds"
        placeholder="选择管理员所属角色"
        multiple
        collapseTags
      >
        <el-option
          v-for="role in roles"
          :key="role.id"
          :label="role.name"
          :value="role.id"
        />
      </el-select>
    </template>
    <!-- 新增、编辑弹窗选择部门 -->
    <template #editDeptId="editParams">
      <fy-tree-select
        ref="treeSelectRef"
        v-model="editParams.val.deptId"
        :data="treeSelectData"
        :option="{ children: 'children', label: 'name' }"
      />
    </template>
    <!-- 行按钮 -->
    <template #rowBtnsRight="scope">
      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        title="确认重置密码?"
        :hide-after="0"
        @confirm="doPasswordReset(scope.row.id)"
      >
        <template #reference>
          <el-button size="small" link type="danger">
            <fy-icon name="Lock" size="13" />
            重置密码
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </TablePage>
</template>

<script lang="ts" setup>
import { Ref, ref, computed } from "vue";
import { rawList2Tree } from "@/ui";
import useTableCols from "./hooks/useTableCols";
import useToolsOptions from "./hooks/useToolsOptions";
import useRowBtnsOptions from "./hooks/useRowBtnsOptions";
import TablePage from "@/components/TablePage/index.vue";
import { getAdminList, resetPassword, getRoleAll, getAllDept } from "@/api/sys";
import { ElMessage } from "element-plus";

// 配置项
defineOptions({ name: "AdminAccount", isFull: true });

// 部门数据
const deptRawData: Ref<Record<string, string>[]> = ref([]);
const deptTreeData: Ref<unknown[]> = ref([]);
const treeSelectRef = ref();

// 请求部門列表
const getDeptList = async () => {
  const { ok, data } = await getAllDept();
  if (ok && data) {
    deptRawData.value = data;
    deptTreeData.value = rawList2Tree({ rawList: data }); //2tree
  }
};

// 上级部门树结构选择数据
const treeSelectData = computed(() => {
  return [
    {
      id: "none",
      name: "无",
    },
    ...deptTreeData.value,
  ];
});

// 管理员角色
const roles = ref<Record<string, string>[]>([]);

// 请求所有角色
const getRoleList = async () => {
  const { ok, data } = await getRoleAll();
  if (ok && Array.isArray(data)) {
    roles.value = data;
  }
};

// 重置密码：123456
const doPasswordReset = async (id: string) => {
  const { ok } = await resetPassword(id);
  if (ok) {
    ElMessage.success("已重置为123456，请通知管理员及时修改！");
  }
};

const getRolesAndDept = () => Promise.all([getDeptList(), getRoleList()]);

// 表格配置
const tableCols = useTableCols();
const toolsOptions = useToolsOptions(getDeptList, getRolesAndDept);
const rowBtnsOptions = useRowBtnsOptions(getRolesAndDept);
</script>
